<template>
	<div class="PC_header">
		 <div class="home">
			 <img  :src="`${$ip}/api/public/showimg/${$store.state.img}`"/>
			 <router-link to="/pc/home">首页Zzx商城</router-link>
		 </div>
		<router-link to="/login" v-show="$store.state.name == ''">你好！<span>请登录</span></router-link>
		<router-link to="/pc/info/infomain" v-show="$store.state.name != '' && $store.state.role == 'usr'">你好！<span>{{$store.state.name}}</span></router-link>
		<router-link to="/admin/home" v-show="$store.state.name != '' && $store.state.role == 'adm'">你好！<span>{{$store.state.name}}</span></router-link>
		 <router-link to="/pc/register" class="zu">免费注册</router-link>
		 <div class="ding">
			  <router-link to="/pc/cart">|我的购物车|</router-link>
		      <router-link to="/pc/myOrder">|我的订单|</router-link>
		 </div>
		<router-link to="/pc/home" class="tui" ><span @click="logout()">退出</span></router-link>
	</div>
</template>

<script>
import { mapActions } from 'vuex'
	export default {
		name:'PcHeader',
		data(){
			return{
			}
		},
		methods:{
			...mapActions(['delHistory']),
			logout(){
				this.delHistory();
				window.localStorage.setItem('token','');
				alert('退出登录成功');
			}
		},
		mounted() {
			
			
		}
	}
</script>

<style scoped>
	a{
		color: #0874FE;
	}
	.PC_header{
		width: 100%;
		height: 50px;
		background:linear-gradient(to right, #23ebd4,#6049dd);
		
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.PC_header .home{
		display: flex;
		align-items: center;
		width: 15%;
		margin-left: 2rem;
	}
	.PC_header .home img{
		height: 40px;
		width: 40px;
		border-radius: 50%;
	}
	.PC_header .home a{
		color: #808080;
		font-weight: 600;
		margin-left: 0.625rem;
	}
	.PC_header .btu{
		background: linear-gradient(#bad3de,#b1b2c8);
		border: none;
		margin-left: 200px;
	}
	 span{
		color: #fe580e;
		font-weight: 600;
	}
	.PC_header .zu{
		color: #0874FE;
	}
	.PC_header .ding{
		width: 15%;
		display: flex;
		justify-content: space-between;
	}
	
	.PC_header .tui{
		margin-right: 20px;
		color: #0874FE;
	}
</style>
